<template>
  <div
    @tap="clickItem"
    class="download_items"
  >
    <div
      v-html="icon(data)"
      class="icon"
    />
    <p class="name">
      {{ getName(data) }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    // 返回icon图标
    icon(item) {
      if (!item || Object.assign(item) === '{}') return;
      let icon = '';
      let color = '';
      const type = this.getType(item.name);
      if ('jpg,jpeg,png,gif'.indexOf(type) > -1) {
        icon = 'image';
        color = 'FF7744';
      } else
      if ('doc,docx'.indexOf(type) > -1) {
        icon = 'word';
        color = '2A5699';
      } else
      if ('xls,xlsx'.indexOf(type) > -1) {
        icon = 'excel';
        color = '107B0F';
      } else
      if ('pdf'.indexOf(type) > -1) {
        icon = 'pdf';
        color = 'DC2E1B';
      } else
      if ('ppt'.indexOf(type) > -1) {
        icon = 'pdf';
        color = 'D24625';
      } else
      if ('txt'.indexOf(type) > -1) {
        icon = 'txt';
        color = 'F39205';
      } else {
        icon = 'unknownfile';
        // color = 'F39205';
      }
      return `<i class="jeicon jeicon-${icon}" style="color: #${color}">`;
    },
    // 返回中文名称
    getName(item) {
      if (!item || Object.assign(item) === '{}') return;
      return item.name;
    },
    // 获取文件格式
    getType(name) {
      const type = name.substring(name.lastIndexOf('.') + 1);
      this.data.type = type;
      return type;
    },
    clickItem() {
      this.$emit('click', this.data);
    },
  },
};
</script>

<style lang="less">
  .download_items {
    margin-top: 5px;
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      > i {
        font-size: 30px;
      }
    }
    .name {
      margin-top: 5px;
      font-size: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      height: 31px;
      text-align: center;
      overflow: hidden;
      color: #999999;
      word-break: break-all;
      line-height: normal;
      /* autoprefixer:off */
      -webkit-box-orient: vertical;
      /* autoprefixer:on */
    }
  }
</style>
